<!--
 * @author: 十一
 * @since: 2024-08-27
 * Drawer.vue
 * @desc: new page
-->
<template>
  <a-drawer
    v-model:open="open"
    :destroyOnClose="true"
    width="500"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.drawerOptions.title"
    placement="right"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="content" label="内容" name="content">
        <div v-if="props.drawerOptions.state == 2">
          {{ formState.content }}
        </div>
        <a-textarea
          :rows="4"
          v-model:value="formState.content"
          placeholder="请输入内容"
          v-else
        />
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 20, offset: 4 }"
        v-if="props.drawerOptions.state != 2"
      >
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { reactive, toRaw } from "vue";
import type { UnwrapRef } from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { DataEcho } from "@/utils/dataEcho";
import {
  editLeaveMessageApi,
  addLeaveMessageApi,
  getClassificationListApi,
} from "@/api/main";
import { message } from "ant-design-vue";
import usePublicConfigStore from "@/stores/modules/public-config";
const publicConfigStore = usePublicConfigStore();
import emitter from "@/utils/mitt";
const open = ref<boolean>(false);
const formRef = ref();
interface FormState {
  parent_id: string;
  content: string;
}

const labelCol = { span: 4 };
const wrapperCol = { span: 20 };
const formState: UnwrapRef<FormState> = reactive({
  parent_id: "",
  content: "",
});

const rules: Record<string, Rule[]> = {
  content: [
    {
      required: true,
      message: "内容不为空",
      trigger: "change",
    },
  ],
};

// 接收父组件的参数
const props = defineProps(["drawerOptions"]);
watch(
  () => open.value,
  (newVal) => {
    if (newVal) {
      formState.parent_id = props.drawerOptions.options.id;
    }
    // formState.parent_id = props.drawerOptions.options.id;
    // DataEcho(formState, props.drawerOptions.options);
  },
  {
    immediate: true,
  }
);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      const requsetParams = toRaw(formState);
      addLeaveMessageApi(requsetParams).then((response: any) => {
          console.log(response);
          if (response.code == 200) {
            message.success("添加成功");
            emitter.emit("handleSuccess");
            open.value = false;
          } else {
            message.error(response.msg);
          }
        });
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const resetForm = () => {
  console.log(formRef.value);
  formRef.value.resetFields();
};
//暴露给父组件
defineExpose({ open });
</script>

<style scoped></style>
